<template>
  <div class="main">
    <div class="main-top">
      <div class="desc-box">
        <div class="box-title">内容简介</div>
        <div class="desc-info">
          <p>大公镇属海安市北大门，是海安北部产城融合发展集聚区。全镇工业企业保有量约300家，其中15亿元以上企业1家，亿元企业16家，规上企业73家。</p>
          <p>政法惠企综合服务中心的建立，旨在提高服务企业精准化、精细化、集约化。通过企业网格化服务管理，实现法律服务一站式受理；巡查走访一站式服务；矛盾纠纷一站式掉处；流动人口（出租房屋）一站式等级；技防安保一站式布控。通过积极探索“网格警格深度融合，网格商会协同共治”的管理模式，实现镇域企业高质量发展。<br>
            企业网格化服务管理采取党政负责人挂钩企业，局办工作人员担任企业网格长，企业配备专职网格员，及时联系企业、掌握企请、解决困难、促进发展。实现了全方位的政企互动管理模式，创建了既充满活力又和谐稳定的企业营商环境。</p>
        </div>
      </div>
      <div class="map-box">
        <img class="map" src="../../../assets/dp-imgs/map@2x.png" alt="map">
        <div class="regions">
          <div
            :class="['region-item', currRegion === e.code ? 'active' : '']"
            v-for="e in regions"
            :key="e.code"
            :style="{ top: e.pos.y + 'px', left: e.pos.x + 'px' }"
            @click="currRegion = e.code"
          ></div>
        </div>
      </div>
    </div>
    <div class="enterprise-box">
      <div class="box-title">企业名称</div>
      <div class="enterprise-list">
        <div
          v-for="e in enterpriseList"
          :key="e.id"
          class="enterprise-item"
          @click="onEnterprise(e)"
        >
          {{ e.name }}
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="visible"
      width="1320px"
      custom-class="dp-enterprise-info"
      :show-close="false"
      top="142px"
      :before-close="() => visible = false">
      <enterprise-info
        :visible="visible"
        :id="enterpriseId"
      ></enterprise-info>
    </el-dialog>
  </div>
</template>

<script>
import EnterpriseInfo from './EnterpriseInfo'
import api from '@/api'
import {mapActions} from "vuex";
export default {
  name: "manage",
  components: {
    EnterpriseInfo
  },
  data() {
    return {
      visible: false,
      enterpriseList: [],
      enterpriseId: '',
      regions: [],
      currRegion: ''
    }
  },
  watch: {
    currRegion(id) {
      this.queryEnterpriseList(id)
    }
  },
  created() {
    this.getDictionary('country')
    this.queryEnterpriseList()
  },
  methods: {
    ...mapActions('d2admin/pm.dictionary', [
      'dictLoad'
    ]),
    async queryEnterpriseList(id) {
      let {code, data} = await api.DP_ENTERPRISE_LIST({
        regionId: id
      })
      if (code === 0) {
        this.enterpriseList = data
      }
    },
    onEnterprise(e) {
      this.visible = true
      this.enterpriseId = e.id
    },
    // 获取字典
    async getDictionary (type) {
      let res = await this.dictLoad({ type })
      if (type === 'country') {
        let regions = res[type]
        // this.currRegion = regions[0].code
        this.regions = regions.map(e => {
          let pos = { x: 0, y: 0 }
          switch (e.value) {
            case '马舍村': pos = { x: 80, y: 76 }; break;
            case '常河村': pos = { x: 103, y: 224 }; break;
            case '古贲村': pos = { x: 171, y: 132 }; break;
            case '姜桥村': pos = { x: 215, y: 286 }; break;
            case '贲集村': pos = { x: 311, y: 167 }; break;
            case '王院村': pos = { x: 369, y: 365 }; break;
            case '贲巷村': pos = { x: 464, y: 296 }; break;
            case '噇口村': pos = { x: 467, y: 178 }; break;
            case '于坝村': pos = { x: 516, y: 430 }; break;
            case '早稼村': pos = { x: 535, y: 259 }; break;
            case '群益村': pos = { x: 602, y: 224 }; break;
            case '天鹅村': pos = { x: 703, y: 312 }; break;
            case '仲洋村': pos = { x: 781, y: 478 }; break;
            case '星河村': pos = { x: 817, y: 226 }; break;
            case '北凌村': pos = { x: 832, y: 342 }; break;
            case '凌东村': pos = { x: 965, y: 459 }; break;
          }
          return {
            ...e,
            pos
          }
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 22px 40px 0;
  .box-title {
    font-size: 20px;
    font-weight: bold;
    color: #18F9C6;
    position: absolute;
    left: 328px;
    top: -10px;
  }
  .main-top {
    display: flex;
    margin-bottom: 15px;
    justify-content: space-between;
    .desc-box {
      margin-top: 13px;
      width: 720px;
      height: 590px;
      background: url("../../../assets/dp-imgs/border1@2x.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      padding: 47px 24px 39px 37px;
      box-sizing: border-box;
      .desc-info {
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 42px;
        height: 504px;
        overflow-y: auto;
        p {
          margin: 0;
          text-indent: 40px;
        }
      }
    }
    .map-box {
      width: 1094px;
      height: 615px;
      position: relative;
      .map {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .regions {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .region-item {
          position: absolute;
          width: 70px;
          height: 30px;
          cursor: pointer;
          transform: translate(-9px, -5px);
          &.active {
            border-bottom: 3px solid rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
  }
  .enterprise-box {
    position: relative;
    height: 300px;
    background: url("../../../assets/dp-imgs/border2@2x.png") no-repeat;
    background-size: 100% 100%;
    padding: 38px 0 0 64px;
    box-sizing: border-box;
    .enterprise-list {
      display: flex;
      flex-wrap: wrap;
      //overflow-y: auto;
      //height: 208px;
      .enterprise-item {
        margin-bottom: 8px;
        margin-right: 90px;
        width: 350px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #3E94FF;
        border-radius: 10px;
        font-size: 20px;
        font-weight: 400;
        color: #3E94FF;
        box-sizing: border-box;
        padding: 0 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          background-color: rgba(62,148,255,0.2);
        }
      }
    }
  }
}

::v-deep .dp-enterprise-info {
  background-color: transparent;
  box-shadow: none;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
